var text = document.querySelector("#text");
var btn = document.querySelector("#btn");
var ul = document.querySelector("#ul");

btn.addEventListener('click',function(){

   if(text.value == ""){
       alert("请输入正确的内容！");
   }else {
       //创建span标签
       var span = document.createElement('span');
       var s = document.createTextNode(text.value);
       span.appendChild(s);

       //span2
       var span1 = document.createElement('span');
       span1.className = "span1";

       var h = "j";
       span1.addEventListener('click',function(){

           if (h == "j"){
               span.classList.remove("span3");
                h = "k"
           }else{
               span.classList.add("span3");
               h = "j"
           }

       });

       //文本span
       span.className = "span2";

       //创建button
       var button = document.createElement('button');
       var b = document.createTextNode('删除');
       button.appendChild(b);

       var button1 = document.createElement('button');
       var b1 = document.createTextNode('编辑');
       button1.appendChild(b1);

       //给删除按钮一个点击事件
       button.addEventListener('click',function (){
           ul.removeChild(this.parentNode);
       });


       //创建li
       var li = document.createElement('li');

       //把span和button追加到li中
       li.appendChild(span1);
       li.appendChild(span);
       li.appendChild(button);
       li.appendChild(button1);

       //把li追加到ul中
       ul.appendChild(li);

       text.value = '';
   }
});